<template>
	<view class="search">
		<MusicHead title="搜索" :icon="true" :iconblack="true"></MusicHead>
		
		<view class="container">
			<scroll-view scroll-y="true" >
				<!-- 搜索框 -->
				<view class="search-search">
					<text class="iconfont icon-Magnifier"></text>
					<!-- @confirm事件和@input事件分管确认和搜索建议功能 -->
					<input v-model="searchWord" @confirm="handleToSearch" @input="handleToSuggest" type="text" placeholder="搜索歌曲" :focus="true"/>
					<text class="iconfont icon-caozuo-guanbi" v-show="searchType===2 || searchType===3" @tap="handleToClose"></text>
				</view>
				<!-- block标签用于占位，渲染时会去掉，用v-if来划分不同状态的区域 -->
				<block v-if="searchType===1">
					<!-- 历史记录 -->
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-lajitong" @tap="handleToClear()"></text>
						</view>
						<view class="search-history-list">
							<!-- <view>KimJisoo</view> -->
							<view v-for="(i,index) in historyList" :key='index' @tap="handleToWord(i)">{{i}}</view>
						</view>
					</view>
					<!-- 热搜榜 -->
					<view class="search-hot">
						<view class="search-hot-title">热搜榜</view>
						<view class="search-hot-item" v-for="(i,index) in hotSearch" :key='index' @tap="handleToWord(i.searchWord)">
							<view class="search-hot-ranking">
								{{index+1}}
							</view>
							<view class="search-hot-song">
								<view>
									{{i.searchWord}}
									<image :src="i.iconUrl ? i.iconUrl : '' "></image>
								</view>
								<view>{{i.content}}</view>
							</view>
							<view class="search-hot-count">
								{{i.score}}
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="searchType===2">
					<view class="search-result">
						<view class="search-result-item" v-for="i in searchResult" :key='i.id' @tap="handleToDetail(i.id)">
							<view class="search-result-item-content">
								<view>{{i.name}}</view>
								<view>
									<image src="../../static/sq.png"></image>
									{{i.artists[0].name}} - {{i.album.name}}
								</view>
							</view>
							<text class="iconfont icon-bofang1"></text>
						</view>
					</view>
				</block>
				<block v-else-if='searchType===3'>
					<view class="search-sugget">
						<view class="search-suggest-item">
							<view class="search-suggest-item-title">搜索&quot{{ searchContentInRealTime }}&quot</view>
							<view class="search-suggest-item-result" v-for="(i,index) in searchSuggestion" :key='index' @tap="handleToWord(i.keyword)">
								<text class="iconfont icon-Magnifier"></text>
								{{i.keyword}}
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MusicHead from '@/components/musichead/MusicHead.vue';
	import '@/common/iconfont.css';
	import {getHotSearch,getSearchResult,getSearchSuggestion} from '../../common/api.js'
	
	export default {
		components:{MusicHead},
		data() {
			return {
				// 不同搜索状态
				searchType:1,
				// 热搜数据
				hotSearch:[],
				// 搜索内容
				searchWord:'',
				// 历史记录数组，用本地存储实现
				historyList:[],
				// 搜索结果
				searchResult:[],
				// 搜索建议
				searchSuggestion:[],
				// 实时捕获的搜索框输入内容
				searchContentInRealTime:''
			}
		},
		methods: {
			// 点击热搜榜内容or历史记录，跳转到该搜索的结果页面
			handleToWord(searchWord){
				this.searchWord=searchWord;
				getSearchResult(this.searchWord).then((res)=>{
					if(res[1].data.code===200){
						this.searchResult=res[1].data.result.songs;
					}
				})
				this.searchType=2;
			},
			// 搜索功能
			handleToSearch(){
				this.historyList.unshift(this.searchWord);
				this.searchType=2;
				// 去重，用ES6的Set类
				this.historyList=[...new Set(this.historyList)];
				// 搜索记录不超过10条
				if(this.historyList.length>10){
					// 可以通过强制数组长度的方法来截取对应长度的数组
					this.historyList.length=10;
				}
				// 下次刷新时还能看到，通过本地缓存来实现
				uni.setStorage({
					key:'searchHistory',
					data:this.historyList
				})
				getSearchResult(this.searchWord).then((res)=>{
					if(res[1].data.code===200){
						this.searchResult=res[1].data.result.songs;
					}
				})
			},
			// 搜索建议
			handleToSuggest(e){
				// 拿到输入内容，正常思路就是用v-model绑定的数据（没法实时），但是建议用event对象
				// console.log(e)
				this.searchContentInRealTime=e.detail.value;
				if(this.searchContentInRealTime.length===0){
					this.searchType=1;
				}
				getSearchSuggestion(this.searchContentInRealTime).then((res)=>{
					if(res[1].data.code===200){
						this.searchSuggestion=res[1].data.result.allMatch;
						this.searchType=3;
					}
				})
			},
			// 跳转到播放页面
			handleToDetail(id){
				uni.navigateTo({
					url:'../detail/detail?id='+id
				});
			},
			// 清空缓存
			handleToClear(){
				uni.removeStorage({
					key: 'searchHistory',
					success: (res)=>{
					    this.historyList=[]
					}
				})
			},
			// 清空搜索框里的输入内容
			handleToClose(){
				this.searchWord='';
				this.searchType=1;
			}
		},
		onLoad(){
			getHotSearch().then((res)=>{
				if(res[1].data.code===200){
					this.hotSearch=res[1].data.data;
				}
			}),
			// 获取本地缓存——搜索记录
			uni.getStorage({
				key:'searchHistory',
				success:(res)=>{
					this.historyList = res.data;
				}
			})
		}
	}
</script>

<style scoped>
	.search-search{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 30rpx;
		background: #F7F7F7;
		border-radius: 50rpx;
	}
	.search-search input{
		font-size: 28rpx;
		flex: 1;
	}
	.search-search text{
		margin: 0 26rpx;
	}
	.search-history{margin: 0 30rpx;}
	.search-history-head{display: flex; margin-bottom: 30rpx; align-items: center;}
	.search-history-head text:nth-child(1){font-size: 26rpx; color: #000000; flex: 1; font-weight: 550;}
	.search-history-head text:nth-child(2){font-size: 28rpx;}
	.search-history-list{display: flex; flex-wrap: wrap;}
	.search-history-list view{background-color: #EFEFEF; border-radius: 50rpx; padding: 10rpx 20rpx; font-size: 26rpx; margin-right:20rpx; margin-bottom: 20rpx;}
	
	.search-hot{margin: 30rpx;}
	.search-hot-title{font-size: 26rpx; color: #000000; font-weight: 600; margin-bottom: 30rpx;}
	.search-hot-item{display: flex; align-items: center; margin-bottom: 36rpx;}
	.search-hot-ranking{margin-right: 30rpx; font-size:34rpx; color: #fb2221; font-weight: 550;}
	.search-hot-song{flex:1; }
	.search-hot-song view:nth-child(1){font-size: 30rpx;}
	.search-hot-song view:nth-child(2){font-size: 24rpx; color: #bebebe; overflow: hidden;width: 500rpx; text-overflow: ellipsis; white-space: nowrap;}
	.search-hot-song view:nth-child(1) image{ width:48rpx; height:22rpx; margin-left: 10rpx; object-fit: contain;}
	.search-hot-count{font-size: 24rpx; color: #bebebe;}
	
	.search-result{border-top: solid 2rpx #e5e5e5;}
	.search-result-item{margin:30rpx 30rpx 0 30rpx; display: flex; align-items: center; padding-bottom: 20rpx; border-bottom: solid 2rpx #e5e5e5;}
	.search-result-item-content{flex: 1;}
	.search-result-item-content view:nth-child(1){font-size: 28rpx;}
	.search-result-item-content view:nth-child(2){font-size: 24rpx; color: #c6c2bf ;overflow: hidden;width: 500rpx; text-overflow: ellipsis; white-space: nowrap;}
	.search-result-item-content view:nth-child(2) image{width: 26rpx; height: 20rpx; margin-right: 10rpx;}
	.search-result-item text{font-size: 50rpx; color: #c6c2bf;}
	
	.search-sugget{border-top: solid 2rpx #e5e5e5;}
	.search-suggest-item{margin:30rpx 50rpx 0 50rpx;}
	.search-suggest-item-title{color: #537caa;font-size: 26rpx;}
	.search-suggest-item-result {font-size: 26rpx; color: #666666; margin-top: 50rpx;}
	.search-suggest-item-result text{font-size: 36rpx; color: #c2c2c2; margin-right: 26rpx; /* position: relative; top: 6rpx; */}
</style>
